<div class="serviceModuleDeploy">
  <!-- <yu-tabs type="border-card" v-model="tabsValue">
    <yu-tab-pane label="图形" name="mxgraph" :disabled="disabledTabPane">
      <yu-button-group v-if="tabsValue == 'mxgraph'" style="position: absolute;z-index: 10;right: 0;position: fixed;right:22px;">
        <yu-button type="primary" @click="btnZoominGraph">放大</yu-button>
        <yu-button type="primary" @click="btnZoomoutGraph">缩小</yu-button>
      </yu-button-group>
      <yu-workflow-server v-if="tabsValue == 'mxgraph'" :height="height - 12" work-type="serviceModule" @overlayclick="overLayClickFn"
        @celldblclick="celldblclickFn" @addbtnclick="addBtnClickFn" @delclick="delclickFn" ref="workflow">
      </yu-workflow-server>
    </yu-tab-pane>
    <yu-tab-pane label="树形" name="xtree" :style="{'min-height': height + 'px'}" :disabled="disabledTabPane">
      <div class="server-type-explain-box">
        <span class="tag server-type-S"></span>
        <span class="server-type-explain">中央监控</span>
        <span class="tag server-type-C"></span>
        <span class="server-type-explain">调度引擎</span>
        <span class="tag server-type-A"></span>
        <span class="server-type-explain">集群代理</span>
        <span class="tag server-type-N"></span>
        <span class="server-type-explain">执行节点</span>
      </div>
      <yu-input placeholder="请输入关键字进行过滤" v-model="filterText"></yu-input>
	    <yu-xtree ref="moduleTree" :local-data="baseData" data-id="serverId" data-label="label" data-pid="parentId" :data-root="rootId" :height="height - 62"
        :default-expand-all="true" @node-dbclick="nodeDbclick" :expand-on-click-node="false" :filter-node-method="filterNode" :render-custom-content="renderCustomContent">
      </yu-xtree>
    </yu-tab-pane>
  </yu-tabs> -->
  <div :style="{'height': height + 'px', 'padding': '16px'}" v-loading="exportLoading">
    <div class="server-type-explain-box">
      <span class="tag server-type-S"></span>
      <span class="server-type-explain">中央监控</span>
      <span class="tag server-type-C"></span>
      <span class="server-type-explain">调度引擎</span>
      <span class="tag server-type-A"></span>
      <span class="server-type-explain">集群代理</span>
      <span class="tag server-type-N"></span>
      <span class="server-type-explain">执行节点</span>
    </div>
	<yu-row :gutter="30">
		<yu-col :span="8">
			<yu-input placeholder="请输入关键字进行过滤" v-model="filterText"></yu-input>
		</yu-col>
		<yu-col :span="14">
			<yu-button @click="importFlowFn" v-if="importFnButton">excel导入</yu-button>
		</yu-col>
	</yu-row>
	<yu-row :gutter="30">
		<yu-col :span="exportList.length > 0 ? 12 : 24">
			<yu-xtree ref="moduleTree" :local-data="baseData" data-id="serverId" data-label="label" data-pid="parentId" :data-root="rootId" :height="height - 62"
			  :default-expand-keys="[rootId]" @node-dbclick="nodeDbclick" :expand-on-click-node="false" :filter-node-method="filterNode" :render-custom-content="renderCustomContent">
			</yu-xtree>			
		</yu-col>
		<yu-col :span="12" v-if="exportList.length > 0">
			<yu-toolBar>		
        <yu-button @click="exportFlowFn" v-if="exportFnButton">excel导出</yu-button>
        <yu-button @click="exportClearFn" v-if="exportFnButton">退出导出页面</yu-button>
			</yu-toolBar>
			<yu-xtable ref="refTable" row-number :data="exportList" :pageable="false">
				<yu-xtable-column label="服务模块代码"   prop="serverId"></yu-xtable-column>
				<yu-xtable-column label="服务模块名称"  prop="serverName"></yu-xtable-column>
				<yu-xtable-column label="端口" prop="srvPort"></yu-xtable-column>
				<yu-xtable-column label="操作">
					<template slot-scope="scope">
						<yu-button @click="deleteFn(scope)" size="small">移除</yu-button>
						</template>
				</yu-xtable-column>
			</yu-xtable>
		</yu-col>
	</yu-row>
  </div>
  <yu-xdialog title="模块信息" :visible.sync="dialogTableVisible" width="75%" close="hidePopWindow">
    <el-tabs type="border-card" v-model="activeTabName" v-loading="infoLoading">
      <el-tab-pane label="基本信息" name="basicInfo">
        <yu-xform ref="serviceForm" label-width="120px" v-model="serviceFormData" label-width="140px">
          <yu-xform-group :column="2">
            <yu-xform-item label="节点类型" ctype="select" :options="serverTypeOptions" name="serverType" required v-if="isServerNodeFlag"></yu-xform-item>
            <yu-xform-item label="服务模块代码" ctype="input" :disabled="serverIDDisabled" name="serverId"></yu-xform-item>
            <yu-xform-item label="服务模块名称" ctype="input" name="serverName" required rules="required" maxlength="120"></yu-xform-item>
            <yu-xform-item label="端口" maxlength="16" ctype="input" name="srvPort" required rules="required" :disabled="portDisabled"></yu-xform-item>
          </yu-xform-group>
          <yu-xform-group :column="1">
            <yu-xform-item label="服务模块部署" label-width="140px" ctype="custom" name="custom">
              <template>
                <yu-button-group style="margin-bottom:1em;">
                  <!-- <yu-button type="primary" @click="addServiceData" :disabled="addServiceDisabled">增加</yu-button>-->
                  <yu-button type="primary" @click="addServiceData">增加</yu-button>
                  <yu-button type="primary" @click="rmServiceData">删除</yu-button>
                  <yu-button type="primary" v-if="showInherit">继承</yu-button>
                </yu-button-group>
                <yu-xtable ref="serTable" style="width: 100%" :data="deployList" height="150" :pageable="pageable" empty-text=" ">
                  <yu-xtable-column ctype="input" prop="location" label="部署位置" maxlength="48">
                  </yu-xtable-column>
                  <yu-xtable-column ctype="input" prop="deployDesc" label="部署说明" maxlength="120">
                  </yu-xtable-column>
                </yu-xtable>
              </template>
            </yu-xform-item>
          </yu-xform-group>
          <yu-xform-group :column="2">
            <yu-xform-item label="备注" maxlength="240" colspan="24" name="remark" :rows="3" ctype="textarea"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
        <div style="text-align:center;margin-top:1em;">
          <!-- <yu-button-group> -->
          <yu-button type="primary" @click="saveInfo" style="margin-left: 8px">保存</yu-button>
          <yu-button @click='hidePopWindow' style="margin-left: 8px">关闭</yu-button>
          <!--   <yu-button @click='hidePopWindow'>关闭</yu-button>-->
          <!-- </yu-button-group> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="参数信息" name="paramInfo" v-if="operation!=='0'">

        <yu-xtable ref="paramsTab" :pageable="false" :data="paramcfgDatas" row-number style="width: 100%" max-height="435">
          <yu-xtable-column prop="paramCode" label="参数代码">
            <template slot-scope="scope">
              {{ scope.row.paramCode.substring(4)}}
            </template>
          </yu-xtable-column>
          <yu-xtable-column prop="paramName" label="参数名称">
          </yu-xtable-column>

          <yu-xtable-column prop="paramValue" label="参数默认值">
          </yu-xtable-column>

          <yu-xtable-column prop="paramValueC" ctype="input" label="当前值" maxlength="250">
          </yu-xtable-column>
        </yu-xtable>

        <div style="text-align:center;margin-top:1em;">
          <!-- <yu-button-group> -->
          <!-- <yu-button @click="lastStep">上一步</yu-button>-->
          <yu-button type="primary" @click="saveParamInfo" style="margin-left: 8px">保存</yu-button>
          <yu-button @click='hidePopWindow' style="margin-left: 8px">关闭</yu-button>
          <!-- </yu-button-group> -->
        </div>
      </el-tab-pane>
    </el-tabs>
  </yu-xdialog>
  
  <yu-dialog title="excel导入" :visible.sync="upLoadDialogVisible" width="400px" v-loading="excelloading">
  				<yu-upload class="upload-demo" ref="my-upload" :action="upLoadUrl" accept=".xls,.xlsx" :before-upload="checkUpload"
  					 :multiple="multipleFalg"	:on-success="successUpload" :file-list="appUploadDatas">
  					<yu-button size="small" type="primary">点击上传</yu-button>
					<a slot="tip" class="downloadcss" @click="exportDemo">模板下载</a>
  					<div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100M</div>
  				</yu-upload>
  				<div class="uplaod-errinfo" v-if="errshow">
  					<yu-tag type="danger">上传失败，错误信息如下：</yu-tag>
  					<div class="uplaod-errlist">
  							<yu-table :data="errdata" highlight-current-row style="width:100%" show-header>
  								<yu-table-column type="index"  width="50">
  									
  								</yu-table-column>
  								<yu-table-column prop="errMsg" label="错误信息">
  									
  								</yu-table-column>
  							</yu-table>	
  					</div>
  				</div>
  </yu-dialog>
  
</div>
<style>
	.downloadcss{
		cursor: pointer;
		margin-left:10px;
	}
  .yu-frame-tab-box>div>div>div.serviceModuleDeploy {
    padding-bottom: 0;
  }

  .serviceModuleDeploy .el-button-group {
    right: 41px !important;
  }

  .serviceModuleDeploy .el-tree-node__children {
    overflow: visible !important;
  }

  .serviceModuleDeploy .tree-btn {
    position: absolute;
    top: 0;
    left: 160px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    z-index: 999;
    background-color: #fff;
  }

  .serviceModuleDeploy .tree-btn span {
    display: block;
    line-height: 26px;
    padding: 0 20px;
    font-size: 12px;
    color: rgba(98, 127, 140, 1);
  }

  .serviceModuleDeploy .tree-btn span:hover {
    color: #4BA1EA;
    background-color: #dedede;
  }

  .serviceModuleDeploy .el-tree-node__content {
    background: #fff;
  }

  .serviceModuleDeploy .server-type-S+.el-tree-node__label {
    color: #5557B9;
  }

  .serviceModuleDeploy .server-type-C+.el-tree-node__label {
    color: #7546C9;
  }

  .serviceModuleDeploy .server-type-A+.el-tree-node__label {
    color: #0AA679;
  }

  .serviceModuleDeploy .server-type-N+.el-tree-node__label {
    color: #409EFF;
  }

  .serviceModuleDeploy .tag {
    display: inline-block;
    width: 10px;
    height: 10px;
  }

  .server-type-explain-box {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 12px auto;
    width: 100%;
    text-align: center;
  }

  .serviceModuleDeploy .server-type-explain {
    font-size: 14px;
    padding: 0 10px 0 5px;
  }

  .serviceModuleDeploy .server-type-explain {
    font-size: 14px;
    padding-right: 20px;
  }

  .serviceModuleDeploy .tag.server-type-S {
    background-color: #5557B9;
  }

  .serviceModuleDeploy .tag.server-type-C {
    background-color: #7546C9;
  }

  .serviceModuleDeploy .tag.server-type-A {
    background-color: #0AA679;
  }

  .serviceModuleDeploy .tag.server-type-N {
    background-color: #409EFF;
  }
</style>
